.card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 150ms ease,
    box-shadow 100ms ease;
  padding: var(--mantine-spacing-xl);
  padding-left: calc(var(--mantine-spacing-xl) * 1.5);

  @mixin hover {
    box-shadow: var(--mantine-shadow-sm);
    transform: scale(1.01);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background-image: linear-gradient(
      0,
      var(--mantine-color-pink-6),
      var(--mantine-color-orange-6)
    );
  }
}
